<template>
  <div class="card-type">
    <div class="card-type-inside">
      <div class="header">
        <div class="left item">
          <img alt="左侧" src="@/components/assets/images/design/1-12.webp" />
        </div>
        <div class="middle item">请点击下方卡片选择验证方式</div>
        <div class="right item">
          <img alt="右侧" src="@/components/assets/images/design/1-12.webp" />
        </div>
      </div>
      <el-row :gutter="20" class="patient-number-area">
        <el-col :span="16">
          <el-form
            :inline="true"
            label-position="top"
            :model="formInfo"
            class="form-code"
          >
            <el-form-item label="业务类型">
              <el-input
                disabled
                v-model="formInfo.cardName"
                placeholder="医保电子凭证核验"
              />
            </el-form-item>
            <el-form-item label="电子凭证编码">
              <el-input
                :autofocus="true"
                ref="inputField"
                v-model="formInfo.cardNo"
                @blur="handleFocusInput"
                placeholder="电子凭证编码"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" class="icon-info">
          <img
            src="@/components/assets/images/design/1-47x2.png"
            alt="icon-info"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
import { buildParentApi } from "@/utils/designer/util";

let buildParent = buildParentApi();
export default {
  name: "MedInsCode",

  componentName: "MedInsCode",

  components: {},

  props: {
    isUseReq: {
      type: Boolean,
      default: true,
    },
  },
  
  data() {
    return {
      formInfo: {
        cardName: "医保电子凭证核验",
        cardNo: "",
      },
    };
  },

  computed: {
    cardTypeInfo() {
      return this.$store.getters["DRCbiz/getCardTypeInfo"];
    },
    patientInfo() {
      return this.$store.getters["DRCbiz/getPatientInfo"];
    },
    // 步骤
    stepInfo() {
      return this.$store.getters["DRCbiz/getStepsInfo"];
    },
  },

  mounted() {},

  methods: {
    handleFocusInput() {
      const self = this;
      setTimeout(() => {
        self.$refs.inputField?.focus();
      }, 100);
    },
  },

  watch: {
    // 监听读取到的卡片号
    cardTypeInfo: {
      handler: function (val) {
        const self = this;
        if (!self.$lodash.isEmpty(val)) {
          Reflect.set(self.formInfo, "cardName", val?.name || "医保电子凭证");
          Reflect.set(self.formInfo, "cardNo", val?.cardNo || "");
          // 如果卡片编号存在--跳转到下一步
          setTimeout(() => {
            if (val?.cardNo) {
              let params = Object();
              let paramInfo = Object();
              // 新增临时字段
              Reflect.set(val, "cardNumber", val?.cardNo);
              self.$store.dispatch("DRCbiz/setCardTypeInfo", val);
              if (!self.isUseReq) {
                // 不去请求
                let stepInfo = parseInt(self.stepInfo);
                self.$store.dispatch("DRCbiz/setStepsInfo", ++stepInfo);
                return;
              }
              let devInfo = JSON.parse(localStorage.getItem("deviceInfo"));
              Reflect.set(paramInfo, "deviceIp", devInfo?.screenIp);
              Reflect.set(paramInfo, "flowId", uuid());
              Reflect.set(paramInfo, "timestamp", self.$day().valueOf());
              Reflect.set(paramInfo, "terminalNo", devInfo?.screenId);
              Reflect.set(paramInfo, "method", "QueryPatient");
              Reflect.set(paramInfo, "cardType", val?.id);
              // 电子医保凭证
              if (parseInt(val?.id) === 29) {
                Reflect.set(paramInfo, "cardNo", val?.cardInfo);
                Reflect.set(paramInfo, "secrityNo", val?.cardInfo);
              } else {
                Reflect.set(paramInfo, "cardNo", val?.cardNo);
                Reflect.set(paramInfo, "secrityNo", val?.cardInfo);
              }
              Reflect.set(paramInfo, "searchType", 1);
              Reflect.set(params, "Request", paramInfo);
              let paramsInfo = self.$x2js.js2xml(params);
              buildParent.executeParentMethod(
                "axiosRep",
                paramsInfo,
                "QueryPatient"
              );
            }
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "./assets/style";
</style>